<template>
  <view class="box">
    <template v-if="!loding">
      <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
        <image
          @click="fanhui"
          class="image1"
          src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
        />TA的房源
        <!-- <image
		    @click="jubao"
		    class="image2"
		    src="https://pic.bangbangtongcheng.com/static/jubao_b.png"
		    mode="widthFix"
		  />-->
      </view>
      <view class="mingpian">
        <view class="name">{{ jjrInfo.nikeName || '未命名用户' }}</view>
        <view
          class="vip-label"
          :style="{
            backgroundColor: colors[jjrInfo.memberLevel - 1].bgColor,
            borderColor: colors[jjrInfo.memberLevel - 1].lineColor,
            color: colors[jjrInfo.memberLevel - 1].wordColor,
          }"
        >
          {{ colors[jjrInfo.memberLevel - 1].level }}
        </view>
        <image
          class="img1"
          src="https://pic.bangbangtongcheng.com/static/my/header.png"
          v-if="jjrInfo.image == ''"
        />
        <image class="img1" :src="jjrInfo.image" v-else />
        <view class="img2" v-if="jjrInfo.isAgent == '1'">经纪人</view>
        <view class="img2" v-else>个人房源</view>
        <!-- <view class="zhiwei" v-if="jjrInfo.isAgent == 1">经纪人</view> -->
        <view class="fen" v-if="jjrInfo.isAgent == 1" @click="pf">为TA评分</view>
        <view class="xin" v-if="jjrInfo.isAgent == 1" @click="pf">
          <image
            class="img3"
            v-for="(item, index) in jjrInfo.scoreAvg"
            :key="index"
            src="https://pic.bangbangtongcheng.com/static/xin_liang.png"
          />
          <image
            class="img3"
            v-for="(item, index1) in 5 - jjrInfo.scoreAvg"
            :key="index1"
            src="https://pic.bangbangtongcheng.com/static/xin_hui.png"
          />
        </view>
        <image
          class="img4"
          v-if="isCollection != 0"
          src="https://pic.bangbangtongcheng.com/static/ysc.png"
          @click="guanzhu"
        />
        <image
          class="img4"
          v-else
          src="https://pic.bangbangtongcheng.com/static/guanzhu.png"
          @click="guanzhu"
        />
        <view class="guan" style="right: 380rpx" v-if="isCollection != 0" @click="guanzhu"
          >已关注</view
        >
        <view class="guan" v-else @click="guanzhu">关注</view>
      </view>
      <view class="tit_t">
        <view @click="louceng(1)" :class="loucengIndex == 1 ? 'xuan' : ''">全部</view>
        <view @click="louceng(2)" :class="loucengIndex == 2 ? 'xuan' : ''">新房</view>
        <view @click="louceng(3)" :class="loucengIndex == 3 ? 'xuan' : ''">二手房</view>
        <view @click="louceng(4)" :class="loucengIndex == 4 ? 'xuan' : ''">出租房</view>
      </view>
      <scroll-view
        scroll-y
        :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 240rpx - 10rpx - 88rpx - 60px )'"
      >
        <view class="list">
          <view class="li" v-for="(item, index) in list" :key="index" @click="details(item.id)">
            <image
              mode="aspectFit"
              :src="item.displayDiagram ? item.displayDiagram : imgUrl + item.houseImage"
            />
            <view class="li_1">
              <view class="tit">{{ item.title }}</view>
              <view class="neirong_1">
                <view class="neir_css">{{ item.region }}</view>
              </view>
              <view class="neirong_1">
                <view class="neir_css">{{ item.house_type || '' }}</view>
              </view>
              <view class="neirong_1">
                <view class="price neir_css" v-if="item.transaction_type == 2"
                  >{{ item.price }}万</view
                >
                <view
                  class="price neir_css"
                  v-if="item.transaction_type == 1 && item.price <= 10000"
                  >{{ item.price }}元</view
                >
                <view class="price neir_css" v-if="item.transaction_type == 1 && item.price > 10000"
                  >{{ item.price / 10000 }}万元</view
                >
                <view class="neir_css" style>{{ item.AREA || item.area }}㎡</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="bottom">
        <view class="but1" @click="getPhone">
          <image src="https://pic.bangbangtongcheng.com/static/dianhua_b.png" />电话
        </view>
        <view class="but2" @click="chat">在线聊天</view>
      </view>
      <view class="window" @click="pfT = !pfT" v-if="pfT">
        <view class="kuangs" @click.stop="pfT = pfT">
          <view class="title">评分</view>
          <view class="starBox">
            <image
              class="img3"
              v-for="item in starNum"
              :key="item"
              src="https://pic.bangbangtongcheng.com/static/xin_liang.png"
              @click="changeStar(item)"
            />
            <image
              class="img3"
              v-for="item in 5 - starNum"
              :key="item + starNum"
              @click="changeStar(starNum + item)"
              src="https://pic.bangbangtongcheng.com/static/xin_hui.png"
            />
          </view>
          <view class="botton" @click="submit">提交</view>
        </view>
      </view>
      <uniBall></uniBall>
    </template>
    <dLoading v-if="loding"></dLoading>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88
  //  #endif
  export default {
    data() {
      return {
        statusBarHeight,
        loucengIndex: 1,
        jjrInfo: {},
        userInfo: uni.getStorageSync('Pduser'),
        list: [],
        imgUrl: this.$imgSrc,
        transactionType: '',
        newOld: '',
        isCollection: '',
        pfT: false,
        starNum: 5,
        id: '',
        loding: true,
        colors: [
          {
            bgColor: '#E9EFEF',
            wordColor: '#60807D',
            lineColor: '#B6C4C3',
            level: '青铜会员',
          },
          {
            bgColor: '#F7F7F7',
            wordColor: '#A3AAB0',
            lineColor: '#D2D9E0',
            level: '白银会员',
          },
          {
            bgColor: '#FFF8DE',
            wordColor: '#CEAB21',
            lineColor: '#D3CAB2',
            level: '黄金会员',
          },
          {
            bgColor: '#EDFAFF',
            wordColor: '#59B0E6',
            lineColor: '#BBD0DB',
            level: '铂金会员',
          },
          {
            bgColor: '#F2F5FF',
            wordColor: '#284EB6',
            lineColor: '#C1CBEF',
            level: '钻石会员',
          },
          {
            bgColor: '#FDF7FF',
            wordColor: '#A877C6',
            lineColor: '#DBC6E8',
            level: '钻石Ⅰ会员',
          },
          {
            bgColor: '#F8F2FF',
            wordColor: '#78439F',
            lineColor: '#958AC3',
            level: '钻石Ⅱ会员',
          },
          {
            bgColor: '#F4F2F2',
            wordColor: '#8D4581',
            lineColor: '#907B8C',
            level: '钻石Ⅲ会员',
          },
          {
            bgColor: '#F4F2F2',
            wordColor: '#502E30',
            lineColor: '#795D5E',
            level: '王者会员',
          },
        ],
      }
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
    },
    onLoad(options) {
      this.id = options.id
      this.getjjr(options.id)
      this.getPers(options.id)
      this.getCollection(options.id)
      this.ll()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    methods: {
      louceng(num) {
        this.loucengIndex = num
        if (num == 1) {
          this.transactionType = ''
          this.newOld = ''
        } else if (num == 2) {
          this.transactionType = '2'
          this.newOld = '1'
        } else if (num == 3) {
          this.transactionType = '2'
          this.newOld = '2'
        } else if (num == 4) {
          this.transactionType = '1'
          this.newOld = ''
        }
        this.getPers(this.jjrInfo.id)
      },
      chat() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${this.jjrInfo.id}&img=${this.jjrInfo.image}&nikeName=${this.jjrInfo.nikeName}`,
        })
      },
      changeStar(num) {
        console.log(num)
        this.starNum = num
      },
      pf() {
        if (!this.showLogin()) {
          return
        }
        this.pfT = !this.pfT
      },
      getjjr(id) {
        let that = this
        this.$myRequest
          .get('/mob/user/getUserInfoByUserId', {
            id,
          })
          .then((res) => {
            console.log('res', res)
            res.userInfo.scoreAvg = res.scoreAvg
            if (res.userInfo.image) {
              let arr = res.userInfo.image.split('')
              if (arr[0] == '/') {
                res.userInfo.image = that.imgUrl + res.userInfo.image
              }
            }
            this.jjrInfo = res.userInfo
            that.$nextTick(() => {
              setTimeout(() => {
                this.loding = false
              }, 1000)
            })
          })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      ll() {
        let that = this
        this.$myRequest
          .post('/mob/user/saveUserCollection', {
            userId: this.userInfo.id,
            type: '2',
            cbType: '3',
            relationId: this.id,
          })
          .then((res) => {})
      },
      submit() {
        let that = this
        this.$myRequest
          .post('/mob/user/saveScoreInfo', {
            userId: this.userInfo.id,
            score: this.starNum,
            agentId: this.jjrInfo.id,
            businessType: 1,
          })
          .then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              })
              this.pfT = false
              this.getjjr(this.jjrInfo.id)
            }
            // console.log(res);
          })
      },
      async getPhone() {
        if (!this.showLogin()) {
          return
        }
        this.onphone()
      },
      onphone() {
        uni.makePhoneCall({
          // 手机号
          phoneNumber: this.jjrInfo.phone,
          // 成功回调
          success: (res) => {
            this.$myRequest
              .post('/mob/user/call', {
                userId: this.userInfo.id,
                telephoneNumber: this.jjrInfo.phone,
                associationId: this.jjrInfo.id,
                type: 3,
              })
              .then((res) => {})
            console.log('调用成功!')
          },

          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          },
        })
      },

      getCollection(id) {
        this.$myRequest
          .get('/mob/user/getIsCollection', {
            userId: this.userInfo.id,
            cbType: 3,
            type: 1,
            relationId: id,
          })
          .then((res) => {
            // console.log(res);
            this.isCollection = res.isCollection
          })
      },
      guanzhu() {
        if (!this.showLogin()) {
          return
        }
        let that = this
        this.$myRequest
          .post('/mob/user/saveUserCollection', {
            userId: this.userInfo.id,
            type: '1',
            cbType: '3',
            relationId: this.jjrInfo.id,
            cancel: this.isCollection ? '1' : '',
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
            })
            this.getjjr(this.jjrInfo.id)
            this.getCollection(this.jjrInfo.id)
            if (!this.isCollection) {
              this.addIntegral(5, '收藏用户')
            }
            // this
          })
      },
      // 增加帮帮豆
      addIntegral(val, title) {
        this.$myRequest
          .post('/mob/iteration/addIntegral', {
            userId: this.userinfo.id,
            ruleNumber: val,
            title: title || '转发房源',
          })
          .then((res) => {})
      },
      getPers(id) {
        let that = this
        this.$myRequest
          .get('/mob/user/getPersonalHouseInfo', {
            userId: id,
            pageSize: 999,
            pageNo: 1,
            transactionType: this.transactionType,
            newOld: this.newOld,
          })
          .then((res) => {
            res.page.list.forEach((el) => {
              if (el.houseImage) {
                el.houseImage = el.houseImage.split('|')[0]
              }
            })
            this.list = res.page.list
          })
      },
      details(id) {
        uni.navigateTo({
          url: '/pages_houses/housing/used/houseDetails?id=' + id,
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      // jubao() {
      //   if (!this.showLogin()) {
      //     return;
      //   }
      //   uni.navigateTo({
      //     url: "/pages/housing/informer?id=" + this.jjrInfo.id,
      //   });
      // },
    },
  }
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    padding-bottom: 120rpx;
    background-color: #fff;
  }

  .bottom {
    position: fixed;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    bottom: 0;

    view {
      position: absolute;
      width: 200rpx;
      height: 70rpx;
      border-radius: 36rpx;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
    }

    .but1 {
      background: #ea4b4b;
      text-indent: 50rpx;
      top: 26rpx;
      right: 254rpx;

      image {
        position: absolute;
        width: 54rpx;
        height: 54rpx;
        left: 16rpx;
        top: 8rpx;
      }
    }

    .but2 {
      background: #64b6a8;
      top: 26rpx;
      right: 30rpx;
    }
  }

  .list {
    margin-top: 0rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .li {
      display: flex;
      align-items: center;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;

      image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
      }
      .li_1 {
        margin-left: 24rpx;
        height: 200rpx;

        .tit {
          width: 366rpx;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
          margin-bottom: 16rpx;
        }

        .neirong_1 {
          width: 366rpx;
          font-size: 24rpx;
          color: #666666;
          display: flex;
          align-items: center;
          .price {
            color: red;
            font-size: 30rpx;
            font-weight: 600;
          }
          .neir_css {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; //想要的行数
            -webkit-box-orient: vertical;
          }
          .neir_css:nth-child(2n) {
            margin-left: 10rpx;
          }
          .neir_css:nth-child(2n-1) {
            margin-right: 10rpx;
          }
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .tit_t {
    padding: 36rpx 0 36rpx 30rpx;

    view {
      display: inline-block;
      width: 120rpx;
      height: 58rpx;
      font-size: 30rpx;
      color: #666666;
      background: #f2f2f2;
      border-radius: 10rpx;
      text-align: center;
      line-height: 58rpx;
      margin-right: 24rpx;
    }

    .xuan {
      color: #fff;
      background-color: #64b6a8;
    }
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    // .image2 {
    //   position: absolute;
    //   width: 56rpx;
    //   height: 56rpx;
    //   // top: 104rpx;
    //   right: 30rpx;
    // }
  }

  .mingpian {
    position: relative;
    width: 690rpx;
    height: 220rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 18rpx;
    margin-top: 40rpx;
    margin-left: 30rpx;
    .vip-label {
      position: absolute;
      top: 100rpx;
      left: 174rpx;
      text-align: center;
      padding: 3rpx 0;
      background: #f6f0ff;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      opacity: 1;
      border: 2rpx solid #bd90d9;
      font-size: 24rpx;
      font-weight: 500;
      color: #bd90d9;
    }
    .name {
      position: absolute;
      top: 40rpx;
      left: 174rpx;
      font-size: 36rpx;

      // display: inline-block;
      width: 320rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 30.5px;
    }

    .img1 {
      position: absolute;
      top: 44rpx;
      left: 30rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .img2 {
      position: absolute;
      top: 132rpx;
      left: 40rpx;
      width: 100rpx;
      height: 36rpx;
      background: url('https://pic.bangbangtongcheng.com/static/name.png');
      background-size: 100% 100%;
      font-size: 20rpx;
      color: #fff;
      text-align: center;
      line-height: 36rpx;
    }

    .zhiwei {
      position: absolute;
      top: 132rpx;
      left: 54rpx;
      font-size: 20rpx;
      color: #fff;
    }

    .fen {
      position: absolute;
      margin-left: 40px;
      top: 60rpx;
      right: 60rpx;
      font-size: 32rpx;
      color: #64b6a8;
    }

    // .fen::before {
    //   content: "";
    //   display: block;
    //   position: absolute;
    //   width: 2rpx;
    //   height: 100rpx;
    //   background-color: #d0d0d0;
    //   left: -90rpx;
    // }
    .xin {
      position: absolute;
      top: 112rpx;
      left: 460rpx;

      .img3 {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .img4 {
      position: absolute;
      top: 144rpx;
      left: 172rpx;
      width: 54rpx;
      height: 54rpx;
    }

    .guan {
      position: absolute;
      top: 150rpx;
      right: 390rpx;
    }
  }

  .window {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;

    .kuangs {
      width: 600rpx;
      height: 300rpx;
      background: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      position: relative;
      overflow: hidden;

      .starBox {
        margin: 30rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .img3 {
          width: 60rpx;
          height: 60rpx;
          margin: 0 10rpx;
        }
      }

      .botton {
        position: absolute;
        bottom: 0;
        height: 80rpx;
        width: 100%;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        background: #64b6a8;
        color: #fff;
      }
    }
  }
</style>
